<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <title>Code Statistic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/theme-chalk/base.css">
    <style>
        html, body {
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: #fafcf1;
        }
        #app {
            position: absolute;
            top: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 30px;
            width: 80%;
            min-width: 220px;
            max-width: 500px;
        }
        #generate {
            margin: 0 auto;
            transform: translateY(20px);
        }
        #preview {
            width: 100%;
        }
        * {
            font-family: Consolas, Nunito, monospace, Serif;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.32/index.full.js"></script>
</head>
<body>
<div id="app">
    <el-card>
        <el-form label-width="auto">
            <el-form-item label="Username"><el-input v-model="form.username"></el-input></el-form-item>
            <el-form-item label="Repo" v-if="isRepo"><el-input v-model="form.repo"></el-input></el-form-item>
            <el-form-item label="Type"><el-radio-group v-model="form.type"><el-radio border label="User"></el-radio><el-radio border label="Repo"></el-radio></el-radio-group></el-form-item>
            <el-form-item label="Dark Mode"><el-switch v-model="form.dark"></el-switch></el-form-item>
            <el-form-item><el-button type="primary" @click="generate" id="generate">Generate</el-button></el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <template v-if="! link"><el-empty image-size="80"></el-empty></template>
        <template v-else><el-form-item label="Link"><el-input readonly v-model="link"></el-input></el-form-item><img id="preview" :src="link" alt></template>
    </el-card>
</div>
<script>
    const form = Vue.ref({
        username: "",
        repo: "",
        type: "User",
        dark: false,
    })
    const link = Vue.ref("");
    const isRepo = Vue.computed(() => form.value.type !== "User");
    const throwWarning = msg => ElementPlus.ElMessage({grouping: true, message: msg,  showClose: false, type: "warning"})
    Vue.createApp({
        data() {
            return {
                form: form,
                link: link,
                isRepo: isRepo,
                generate: () => {
                    const username = form.value.username.trim(),
                        repo = form.value.repo.trim(),
                        dark = !!form.value.dark;

                    if (! username) {throwWarning("username is empty."); return }
                    if (isRepo.value && ! repo) {throwWarning("repo is empty."); return }
                    link.value = location.origin +
                        ((!isRepo.value) ? `/user/${username}/` : `/repo/${username}/${repo}`) +
                        (dark ? "?theme=dark" : "");
                }
            }
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>